<template>
  <div class="my-component">
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="请输入"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.age" placeholder="请输入"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="" width="120">
        <template slot-scope="scope">
          <el-button @click="deleteRow(scope.$index)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="button-container">
      <el-button @click="addRow" type="primary">新增</el-button>
    </div>
    <div>
      <el-button @click="convertTestDataToParams" type="primary">提交</el-button>
      <el-button @click="convertTestDataToParamsAAA" type="primary">提交AA</el-button>
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'formPage',
  data() {
    return {
      tableData: [
        { name: '', age: '', address: '' ,type:'boolean'} // 默认一条空数据
      ],
      testData: [ 
        {
          code:'code111',
          value: "value111",
          type:"object",
          children: [
            {
              checkRule: "",
              children:[],
              code:'Code1',
              value: "value-111",
              type:"number",
            },
            {
              children:[],
              code:'Code2',
              value: "value-222",
              name: "name3",
              type:"string",
            },
            {
              value: "value-333",
              code:'Code3',
              required: "1",
              type:"object",
              children:[
                {
                  children:[],
                  code:'Child3',
                  value:'Child3-value',
                  name: "name4",
                  type:"boolean",
                }
              ],

            }
          ]
        }
      ],
      params:{
      }
    };
  },
  methods: {
    addRow() {
      this.tableData.push({ name: '', age: '', address: '' });
      console.log('新增',this.tableData);
      
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
    convertTestDataToParams() {
      this.params = {};
      this.testData.forEach(item => {
        this.params[item.name] = item.age;
        console.log('this.params', this.params);
        
      });
    },
    convertTestDataToParamsAAA() {
      // 转换树形数组为树形对象
        const treeObject = this.convertTree(this.testData);
        console.log(treeObject);
          // 提取所有顶层 key 的值并赋给 params 对象
          for (const key in treeObject) {
            if (treeObject.hasOwnProperty(key)) {
              this.params = treeObject[key];
              console.log('this.params', this.params);
              break; // 只提取第一个顶层 key 的值
            }
          }
    },
    convertTree(nodes) {
      let result = {};
      nodes.forEach(node => {
        if (node.type === 'object') {
          result[node.code] = this.convertTree(node.children);
        } else {
          result[node.code] = node.value;
        }
      });
      return result;
    }
  }
}
</script>

<style scoped>
.my-component {
  position: relative;
}

.button-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>